<template>
  <div class="home-view">
    <x-header>This is the page title.</x-header>
    <scroller lock-x
              height="100%"
              @on-scroll-bottom="isEnd ? null : this.getEventList"
              ref="scroller"
              :scroll-bottom-offset="200">
      <ul class="event-list">
        <li v-for="item in eventList">
          <router-link :to="'event/' + item.id">
            {{item.id + '. ' + item.name}}
          </router-link>
        </li>
      </ul>
      <load-more tip="loading"></load-more>
    </scroller>
  </div>
</template>

<script>
  import { mapState, mapActions } from 'vuex'
  import { XHeader, Scroller, LoadMore } from 'vux'

  export default {
    name: 'home-view',
    components: {
      XHeader,
      Scroller,
      LoadMore
    },
    data () {
      return {
        scroller: null,
        isLoading: false,
        isEnd: false
      }
    },
    computed: {
      ...mapState({
        eventList: state => state.event.events
      })
    },
    methods: {
      ...mapActions([
        'fetchEventList'
      ]),
      getEventList () {
        if (this.isEnd) {
          return
        }
        this.isLoading = true
        setTimeout(() => {
//          this.$vux.alert.show({
//            title: 'hello',
//            content: 'content'
//          })
          this.fetchEventList().then(res => {
            this.isLoading = false
            console.log(res)
          })
        }, 1000)
      }
    },
    created () {
//      this.getEventList()
      this.$nextTick(() => {
        this.$refs.scroller.reset()
      })
    },
    mounted () {
//      this.scroller = this.$el
//      console.log(this.scroller)
    }
  }
</script>

<style lang="scss" scoped>
  @import "../assets/sass/variables";

  .home-view {

    .event-list {
      padding: 0 20px;
      margin: 0;
      li {
        border-bottom: 1px solid #ccc;
        line-height: 50px;
        a {
          font-size: 14px;
          display: block;
        }
      }
    }

  }

</style>
